<template>
  <div class="container">
    <div style="text-align:center;">
      <h3>场地申请修改</h3>
    </div>
    <hr />
    <table>
      <tr>
        <td style="width: 200px;" align="right">
          <span>场地：</span>
        </td>
        <td style="width: 600px;">
          <el-button
            type="text"
            @click="openFieldList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.field.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>申请的时间：</span>
        </td>
        <td>
          <el-date-picker
            v-model="tableData.applyTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          ></el-date-picker>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>申请用途描述：</span>
        </td>
        <td>
          <el-input type="textarea" v-model="tableData.application"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>申请状态：</span>
        </td>
        <td>
          <el-button
            type="text"
            @click="openStatusList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.status }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>申请人：</span>
        </td>
        <td>
          <el-input v-model="tableData.applicant"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>申请人联系号码：</span>
        </td>
        <td>
          <el-input v-model="tableData.telephone"></el-input>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <el-button type="primary" @click="update">确认</el-button>
          <el-button type="primary" @click="reset">取消</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </td>
      </tr>
    </table>
    <!-- 场地筛选 -->
    <el-dialog title="选择场地" :visible.sync="openFieldList">
      <el-input placeholder="请输入关键字" v-model="fieldKeyword">
        <template slot="prepend">场地名称</template>
        <el-button slot="append" icon="el-icon-search" @click="getFieldByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="fieldSelect">
        <el-radio
          v-for="(field, index) in fieldList"
          :key="'field'+index"
          :label="field"
        >{{field.name}}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fieldSelect = ''">清 空</el-button>
        <el-button type="primary" @click="fieldSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 申请状态筛选 -->
    <el-dialog title="选择场地" :visible.sync="openStatusList">
      <el-input placeholder="请输入关键字" v-model="statusKeyword">
        <template slot="prepend">状态名</template>
        <el-button slot="append" icon="el-icon-search" @click="getStatusByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="statusSelect">
        <el-radio
          v-for="(status, index) in statusList"
          :key="'status' + index"
          :label="status"
        >{{ status.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="statusSelect = ''">清 空</el-button>
        <el-button type="primary" @click="statusSelected">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "update",
  props: {
    fieldApplyDetails: {
      type: Object, //组件传过来的场地申请详情
    },
  },
  data() {
    return {
      fieldList: [], //场地列表
      fieldSelect: "", //选择的场地
      openFieldList: false, //场地刷选显示
      fieldKeyword: "", //场地关键词

      openStatusList: false, //状态筛选显示
      statusSelect: "", //选择的状态
      statusList: [], //状态列表
      statusKeyword: "", //状态关键词

      opentimeList: false, //时间筛选显示

      //表格数据
      tableData: {
        id: "",
        field: "",
        applicant: "",
        telephone: "",
        application: "",
        applyTime: "", //时间段
        status: "",
        create_time: "",
      },
    };
  },
  created() {
    //表格数据初始化
    this.init();
    //获取场地列表
    this.getFieldList();
    //获取状态列表
    this.getStatusList();
  },
  methods: {
    //表格数据初始化
    init() {
      this.tableData.id = this.fieldApplyDetails.id;
      this.tableData.applicant = this.fieldApplyDetails.applicant;
      this.tableData.application = this.fieldApplyDetails.application;
      this.tableData.create_time = this.fieldApplyDetails.create_time;
      this.tableData.telephone = this.fieldApplyDetails.telephone;
      this.tableData.field = this.fieldApplyDetails.field;
      this.tableData.status = this.fieldApplyDetails.status;
      this.tableData.applyTime = this.fieldApplyDetails.applyTime;
    },

    //选择场地
    fieldSelected() {
      if (this.fieldSelect != "") {
        this.tableData.field = this.fieldSelect;
      }
      this.openFieldList = false;
    },

    //选择状态
    statusSelected() {
      if (this.statusSelect != "") {
        this.tableData.status = this.statusSelect;
      }
      this.openStatusList = false;
    },

    //根据关键词搜索场地
    getFieldByKeyword() {},

    //根据关键词搜索状态
    getStatusByKeyword() {},

    //获取场地列表
    getFieldList() {
      this.fieldList = [
        {
          id: "01", //编号
          name: "第一教学楼", //名称
          english_name: "", //英文名称
          telephone: "", //电话号码
          discription: "", //描述
          campus: { id: "01", name: "主校区", discription: "" }, //校区
          area: { id: "01", name: "美术楼", discription: "" }, //功能区
          fieldType: { id: "01", name: "室内", discription: "" }, //场地类型
          by_who: { id: "01", name: "张三" }, //负责人
          create_time: "", //创建时间
        },
        {
          id: "02",
          name: "第二教学楼",
          english_name: "",
          telephone: "",
          discription: "",
          campus: { id: "02", name: "星湖校区", discription: "" }, //校区
          area: { id: "02", name: "第一教学楼", discription: "" },
          fieldType: { id: "02", name: "室内", discription: "" },
          by_who: { id: "02", name: "李四" }, //创建者
          create_time: "",
        },
        {
          id: "03",
          name: "第三教学楼",
          english_name: "",
          telephone: "",
          discription: "",
          campus: { id: "03", name: "主校区", discription: "" }, //校区
          area: { id: "03", name: "实验楼", discription: "" },
          fieldType: { id: "03", name: "室内", discription: "" },
          by_who: { id: "03", name: "王五" }, //创建者
          create_time: "",
        },
      ];
    },

    //获取状态列表
    getStatusList() {
      this.statusList = [
        { id: "01", name: "未通过" },
        { id: "02", name: "已结束" },
        { id: "03", name: "审核中" },
        { id: "04", name: "队列中" },
      ];
    },

    //返回
    back() {
      this.$emit("closeUpdate", false);
    },

    //还原
    reset() {
      this.init();
    },

    //修改场地申请信息
    update() {
      this.$alert("修改场地申请信息", "修改成功", {
        confirmButtonText: "确定",
        callback: (action) => {
          //打印修改后的数据
          console.log(this.compusDetails);
          //修改成功，返回页面
          this.$emit("closeUpdate", false);
        },
      });
    },
  },
};
</script>

<style scoped>
h3 {
  font-weight: 500;
}
p {
  float: right;
  font-weight: 300;
}
span {
  font-weight: 300;
}
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
tr {
  padding: 10px;
  height: 50px;
  line-height: 50px;
}
</style>
